<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <title>流光</title>
    <link rel="stylesheet" href="./web/audio.css" />
  </head>
  <style>
    body{
      background:  linear-gradient(to right,pink,cornflowerblue);
    }
    .text1{
      margin: 150px 450px 150px;
      height:  400px;
      padding: 50px 0px;
      font-family: "Times New Roman";
    }
    #a_file {
      background: cornflowerblue;
      margin: 50px 200px;
      padding:35px 50px;
      position:absolute;
      font-size: 25px;
      font-family: "Times New Roman";
      border-radius:50px;
    }
    #a_stream {
      background:cornflowerblue;
      margin: 200px 220px ;
      padding:20px 50px;
      position:absolute;
      font-size: 25px;
      border-radius:50px;
    }
    .text2{
      margin: 50px 450px 50px;
      height:  100px;
      padding: 50px 300px;
      font-family: "Times New Roman";
    }
    #button1{
      background: cornflowerblue;
      margin: 20px -500px;
      padding:20px 50px;
      position:absolute;
      font-size: 25px;
      font-family: "Times New Roman";
      border-radius:50px;
    }
    #button2{
      background:cornflowerblue;
      margin: 20px -250px ;
      padding:20px 50px;
      position:absolute;
      font-size: 25px;
      border-radius:50px;
    }
    #button3{
      background:cornflowerblue;
      margin: 20px 250px ;
      padding:20px 50px;
      position:absolute;
      font-size: 25px;
      border-radius:50px;
      width: 50px;
    }
    #button4{
      background:cornflowerblue;
      margin: 20px 0px ;
      padding:20px 50px;
      position:absolute;
      font-size: 25px;
      border-radius:50px;
    }

    #button5 {
      background:cornflowerblue;
      margin: 320px 220px ;
      padding:20px 50px;
      position:absolute;
      font-size: 25px;
      border-radius:50px;
    }

    #button6 {
      background: cornflowerblue;
      margin: 440px 200px;
      padding:35px 50px;
      position:absolute;
      font-size: 25px;
      font-family: "Times New Roman";
      border-radius:50px;
    }
    #button7 {
        background: cornflowerblue;
        margin: 560px 200px;
        padding:35px 50px;
        position:absolute;
        font-size: 25px;
        font-family: "Times New Roman";
        border-radius:50px;
    }
  </style>

  <body>
  <div id="loader"></div>
  <div class="text1" id="div1">
    <a href="#" class="file" id="a_file">播放本地文件<input type="file" id="file" onchange="onInputFileChange()"></a>
    <a href="#" class="file" id="a_stream" onclick="onMediaStream()">播放麦克风</a>
    <a href="#" class="file" id="button5" onclick="board()">开/关边框</a>
    <a href="#" class="file" id="button6" onclick="blink()">切换闪烁</a>
    <a href="#" class="file" id="button7" onclick="time()">时钟/频谱</a>
  </div>
  <div class="text2">
    <a href="#" class="bf" id="button1" onclick="pause()">播放/暂停</a>
    <a href="#" class="bf" id="button2" onclick="reload()">重新播放</a>
    <a href="#" class="bf" id="button3">切歌<input type="file" id="file2" onchange="reloadFile()"></a>
    <a href="#" class="bf" id="button4" onclick="exit()">退出</a>
  </div>
  <canvas
    id="canvas"
    width="1366"
    height="680"
    style="position: absolute"
  ></canvas>
  </body>
  <script type="text/javascript" src="./web/audio.js"></script>
</html>
